<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tinyflow Quick Start</title>
    <style>
        #app {
            width: 100%;
            height: 100vh;
        }
        body {
            padding: 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px 12px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body onload="loadData()">
<a href="workflow.html">新增</a>
<div id="list">
    <table id="data-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>App ID</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据将被插入到这里 -->
        </tbody>
    </table>
</div>
<script src="config.js"></script>
<script>
    // 加载数据
    function loadData() {
        fetch(`${BASE_URL}/workflow/getAll`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) throw new Error(`请求失败! status: ${response.status}`);
                return response.json();
            })
            .then(list => {
                renderList(list);
            })
            .catch(error => {
                console.error('数据加载失败:', error);
                // 可以在这里添加UI错误提示
            });
    }

    function renderList(list) {
        var tbody = document.querySelector("#data-table tbody");
        tbody.innerHTML = ''; // 清空现有内容
        list.forEach(function(item) {
            var row = `<tr>
                           <td>${item.id}</td>
                           <td>${item.name}</td>
                           <td>${item.app_id}</td>
                           <td><a href="workflow.html?id=${item.id}">打开</a></td>
                       </tr>`;
            tbody.innerHTML += row;
        });
    }
</script>
</body>
</html>